<template>
    <div>
        <h2>BetterScroll 2.0 滚动插件 纵向演示</h2>
        <div class="core-specified-content-container">
            <div class="scroll-level__wrapper" ref="scrollRef">
                <div class="ignore-content">
                    The Blue area is not taken as BetterScroll's content
                </div>
                <div class="scroll-content-wrap">
                    <div class="scroll-item__cell" v-for="n in 30" :key="n">
                        {{ n }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import BScroll from "better-scroll";

const scrollRef = ref(null);
const bscroll = ref(null);
nextTick(() => {
    bscroll.value = new BScroll(scrollRef.value, {
        specifiedIndexAsContent: 1,
        probeType: 3,
    });
});
onBeforeUnmount(() => {
    bscroll.value.destroy();
});
</script>

<style lang="scss">
.core-specified-content-container {
    text-align: center;
    .scroll-level__wrapper {
        height: 400px;
        overflow: hidden;
        border: 1px solid #42b983;
    }
    .ignore-content {
        padding: 20px;
        color: white;
        font-size: 20px;
        font-weight: bold;
        background-color: #2c3e50;
    }
    .scroll-item__cell {
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        font-weight: bold;
        border-bottom: 1px solid #eee;
        text-align: center;
        &:nth-child(2n) {
            background-color: #f3f5f7;
        }
        &:nth-child(2n + 1) {
            background-color: #42b983;
        }
    }
}
</style>
